<template>
	<view class="contact-container page-container">
		<!-- 微信小程序客服 -->
		<view class="wechat-service-section">
			<view class="service-card">
				<view class="service-header">
					<text class="service-title">💬 在线客服</text>
					<text class="service-desc">点击下方按钮，直接与客服对话</text>
				</view>
				<button class="wechat-service-btn" open-type="contact" @contact="handleContact">
					立即咨询
				</button>
			</view>
		</view>

		<!-- 联系方式 -->
		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系方式</text>
			</view>
			<view class="contact-list">
				<view class="contact-item" @click="makeCall">
					<view class="contact-left">
						<u-icon name="phone" size="24" color="#1c705e"></u-icon>
						<text class="contact-label">客服电话</text>
					</view>
					<view class="contact-right">
						<text class="contact-value">400-888-6789</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>

				<view class="contact-item" @click="copyWechat">
					<view class="contact-left">
						<u-icon name="weixin-fill" size="24" color="#1c705e"></u-icon>
						<text class="contact-label">微信客服</text>
					</view>
					<view class="contact-right">
						<text class="contact-value">liubao_tea</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>

				<view class="contact-item" @click="copyQQ">
					<view class="contact-left">
						<u-icon name="qq-fill" size="24" color="#1c705e"></u-icon>
						<text class="contact-label">QQ客服</text>
					</view>
					<view class="contact-right">
						<text class="contact-value">123456789</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>

				<view class="contact-item" @click="sendEmail">
					<view class="contact-left">
						<u-icon name="email" size="24" color="#1c705e"></u-icon>
						<text class="contact-label">邮箱</text>
					</view>
					<view class="contact-right">
						<text class="contact-value">service@liubao.com</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 公司地址 -->
		<view class="address-section">
			<view class="section-title">
				<text class="title-text">公司地址</text>
			</view>
			<view class="address-content">
				<view class="address-item">
					<u-icon name="map" size="24" color="#1c705e"></u-icon>
					<view class="address-info">
						<text class="address-name">广西梧州六堡茶股份有限公司</text>
						<text class="address-detail">广西壮族自治区梧州市长洲区龙腾路106号第1幢</text>
					</view>
				</view>
				<button class="map-btn" @click="openMap">查看地图</button>
			</view>
		</view>

		<!-- 营业时间 -->
		<view class="time-section">
			<view class="section-title">
				<text class="title-text">营业时间</text>
			</view>
			<view class="time-content">
				<view class="time-item">
					<text class="time-label">客服时间</text>
					<text class="time-value">周一至周日 9:00-21:00</text>
				</view>
				<view class="time-item">
					<text class="time-label">发货时间</text>
					<text class="time-value">周一至周六 9:00-18:00</text>
				</view>
			</view>
		</view>

		<!-- 二维码 -->
		<view class="qrcode-section">
			<view class="section-title">
				<text class="title-text">关注我们</text>
			</view>
			<view class="qrcode-content">
				<view class="qrcode-item">
					<image :src="$tools.buildUrl('/static/images/wechat-qr.png')" mode="aspectFit" class="qrcode-image">
					</image>
					<text class="qrcode-text">微信公众号</text>
				</view>
				<view class="qrcode-item">
					<image :src="$tools.buildUrl('/static/images/miniapp-qr.png')" mode="aspectFit"
						class="qrcode-image"></image>
					<text class="qrcode-text">小程序</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			// 处理微信客服
			handleContact(e) {
				// console.log('客服消息：', e.detail)
				if (e.detail.errMsg === 'contact:ok') {
					// console.log('用户进入客服会话')
				}
			},

			// 拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '400-888-6789',
					success: () => {
						// console.log('拨打电话成功')
					},
					fail: (err) => {
						uni.showToast({
							title: '拨打失败',
							icon: 'none'
						})
					}
				})
			},

			// 复制微信号
			copyWechat() {
				uni.setClipboardData({
					data: 'liubao_tea',
					success: () => {
						uni.showToast({
							title: '微信号已复制',
							icon: 'success'
						})
					}
				})
			},

			// 复制QQ号
			copyQQ() {
				uni.setClipboardData({
					data: '123456789',
					success: () => {
						uni.showToast({
							title: 'QQ号已复制',
							icon: 'success'
						})
					}
				})
			},

			// 发送邮件
			sendEmail() {
				uni.setClipboardData({
					data: 'service@liubao.com',
					success: () => {
						uni.showToast({
							title: '邮箱地址已复制',
							icon: 'success'
						})
					}
				})
			},

			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: 23.473809,
					longitude: 111.228752,
					name: '广西梧州六堡茶股份有限公司',
					address: '广西壮族自治区梧州市长洲区龙腾路106号第1幢',
					success: () => {
						// console.log('打开地图成功')
					},
					fail: (err) => {
						uni.showToast({
							title: '打开地图失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact-container {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 微信客服区域 */
	.wechat-service-section {
		padding: 30rpx;
	}

	.service-card {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		border-radius: 20rpx;
		padding: 40rpx;
		text-align: center;
		color: white;
	}

	.service-header {
		margin-bottom: 30rpx;
	}

	.service-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 12rpx;
	}

	.service-desc {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.wechat-service-btn {
		background: white;
		color: #52a58a;
		border: none;
		border-radius: 30rpx;
		padding: 20rpx 60rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.wechat-service-btn::after {
		border: none;
	}

	.contact-section,
	.address-section,
	.time-section,
	.qrcode-section {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.section-title {
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.contact-list {
		margin-top: 20rpx;
	}

	.contact-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.contact-left {
		display: flex;
		align-items: center;
	}

	.contact-label {
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.contact-right {
		display: flex;
		align-items: center;
	}

	.contact-value {
		font-size: 28rpx;
		color: #666;
		margin-right: 16rpx;
	}

	.address-content {
		margin-top: 20rpx;
	}

	.address-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}

	.address-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.address-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.address-detail {
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		display: block;
	}

	.map-btn {
		background-color: #1c705e;
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		width: 100%;
	}

	.time-content {
		margin-top: 20rpx;
	}

	.time-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.time-item:last-child {
		border-bottom: none;
	}

	.time-label {
		font-size: 28rpx;
		color: #333;
	}

	.time-value {
		font-size: 28rpx;
		color: #666;
	}

	.qrcode-content {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.qrcode-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.qrcode-text {
		font-size: 26rpx;
		color: #666;
	}
</style>